<template>
    <div class="application-detail">
      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="申请编号">
          {{ application.id }}
        </el-descriptions-item>
        <el-descriptions-item label="申请类型">
          {{ getApplicationType(application.type) }}
        </el-descriptions-item>
        <el-descriptions-item label="申请状态">
          <el-tag :type="getStatusType(application.status)">
            {{ application.status }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="申请日期">
          {{ formatDate(application.applyDate) }}
        </el-descriptions-item>
      </el-descriptions>
  
      <el-descriptions title="申请人信息" :column="2" border class="mt-4">
        <el-descriptions-item label="用户编号">
          {{ application.user.id }}
        </el-descriptions-item>
        <el-descriptions-item label="用户名">
          {{ application.user.name }}
        </el-descriptions-item>
        <el-descriptions-item label="年级">
          {{ application.user.grade }}
        </el-descriptions-item>
        <el-descriptions-item label="专业">
          {{ application.user.major }}
        </el-descriptions-item>
        <el-descriptions-item label="班级">
          {{ application.user.class }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式">
          {{ application.user.contact }}
        </el-descriptions-item>
      </el-descriptions>
  
      <!-- 创建社团申请 -->
      <template v-if="application.type === 5">
        <el-descriptions title="创建社团信息" :column="2" border class="mt-4">
          <el-descriptions-item label="社团名称">
            {{ application.clubInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item label="社团标签"
            ><el-tag
              v-for="tag in application.clubInfo.tags"
              :key="tag"
              class="mr-2"
            >
              {{ tag }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <div class="club-description mt-4">
          <h3>社团简介</h3>
          <el-input
            type="textarea"
            v-model="application.clubInfo.description"
            :rows="4"
            readonly
          />
        </div>
      </template>
  
      <!-- 注销社团申请 -->
      <template v-if="application.type === 6">
        <el-descriptions title="注销社团信息" :column="2" border class="mt-4">
          <el-descriptions-item label="社团编号">
            {{ application.clubInfo.id }}
          </el-descriptions-item>
          <el-descriptions-item label="社团名称">
            {{ application.clubInfo.name }}
          </el-descriptions-item></el-descriptions
        >
        <el-descriptions
          title="社长信息"
          :column="2"
          border
          class="mt-4"
          v-if="application.clubInfo.president"
        >
          <el-descriptions-item label="用户编号">
            {{ application.clubInfo.president.id }}
          </el-descriptions-item>
          <el-descriptions-item label="用户名">
            {{ application.clubInfo.president.name }}
          </el-descriptions-item>
          <el-descriptions-item label="年级">
            {{ application.clubInfo.president.grade }}
          </el-descriptions-item>
          <el-descriptions-item label="专业">
            {{ application.clubInfo.president.major }}
          </el-descriptions-item>
          <el-descriptions-item label="班级">
            {{ application.clubInfo.president.class }}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">
            {{ application.clubInfo.president.contact }}
          </el-descriptions-item>
        </el-descriptions>
      </template>
  
      <!-- 修改社团信息申请 -->
      <template v-if="application.type === 7">
        <el-descriptions title="修改后社团信息" :column="2" border class="mt-4">
          <el-descriptions-item label="社团名称">
            {{ application.clubInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item label="社团标签">
            <el-tag
              v-for="tag in application.clubInfo.tags"
              :key="tag"
              class="mr-2"
            >
              {{ tag }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="社团简介">
            {{ application.clubInfo.description }}
          </el-descriptions-item>
        </el-descriptions>
  
        <el-descriptions
          title="新社长信息"
          :column="2"
          border
          class="mt-4"
          v-if="application.clubInfo.president"
        >
          <el-descriptions-item label="用户编号">
            {{ application.clubInfo.president?.id }}
          </el-descriptions-item>
          <el-descriptions-item label="用户名">
            {{ application.clubInfo.president?.name }}
          </el-descriptions-item>
          <el-descriptions-item label="年级">
            {{ application.clubInfo.president?.grade }}
          </el-descriptions-item>
          <el-descriptions-item label="专业">
            {{ application.clubInfo.president?.major }}
          </el-descriptions-item>
          <el-descriptions-item label="班级">
            {{ application.clubInfo.president?.class }}
          </el-descriptions-item>
          <el-descriptions-item label="联系方式">
            {{ application.clubInfo.president?.contact }}
          </el-descriptions-item>
        </el-descriptions>
      </template>
  
      <div class="application-reason mt-4">
        <h4>申请原因</h4>
        <el-input
          type="textarea"
          v-model="application.reason"
          :rows="4"
          readonly
        />
      </div>
  
      <div class="review-info mt-4">
        <h3>审核信息</h3>
        <el-descriptions :column="2" border v-if="application.review.id">
          <el-descriptions-item label="审核结果">
            <el-tag :type="getStatusType(application.review.result)">
              {{ application.review.result }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="审核时间">
            {{ formatDate(application.review.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="审核人">
            {{ application.review.userVO.userName }} </el-descriptions-item
          ><el-descriptions-item label="审核人联系方式">
            {{ application.review.userVO.phoneNumber }}
          </el-descriptions-item>
        </el-descriptions>
        <el-input
          v-if="application.review.id"
          type="textarea"
          v-model="application.review.content"
          :rows="4"
          readonly
          placeholder="审核意见"
          class="mt-2"
        /><el-empty v-else description="暂无审核信息" />
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from "vue";
  import {
    ElMessage,
    ElTag,
    ElDescriptions,
    ElDescriptionsItem,
    ElInput,
    ElEmpty,
  } from "element-plus";
  import moment from "moment";
  import { useRoute } from "vue-router";
  import { ClubApplicationControllerService } from "../../../../../generated";
  
  interface ClubApplicationInfo {
    id: number;
    type: number;
    status: string;
    applyDate: string;
    reason: string;
    user: {
      id: number;
      name: string;
      grade: string;
      major: string;
      class: string;
      contact: string;
    };
    clubInfo: {
      id?: number;
      name: string;
      tags?: string[];
      description?: string;
      president?: {
        id: number;
        name: string;
        grade: string;
        major: string;
        class: string;
        contact: string;
      };
    };
    review: {
      id: number;
      result: string;
      content: string;
      createTime: string;
      userVO: {
        userName: string;
        phoneNumber: string;
      };
    };
  }
  
  const application = ref<ClubApplicationInfo>({
    id: 0,
    type: 0,
    status: "",
    applyDate: "",
    reason: "",
    user: {
      id: 0,
      name: "",
      grade: "",
      major: "",
      class: "",
      contact: "",
    },
    clubInfo: {
      id: 0,
      name: "",
      tags: [],
      description: "",
      president: {
        id: 0,
        name: "",
        grade: "",
        major: "",
        class: "",
        contact: "",
      },
    },
    review: {
      id: 0,
      result: "",
      content: "",
      createTime: "",
      userVO: {
        userName: "",
        phoneNumber: "",
      },
    },
  });
  
  const getApplicationType = (type: number): string => {
    switch (type) {
      case 5:
        return "创建社团";
      case 6:
        return "注销社团";
      case 7:
        return "修改社团信息";
      default:
        return "";
    }
  };
  
  const formatDate = (date: string): string => {
    return moment(date).format("YYYY年MM月DD日 HH:mm:ss");
  };
  
  const getStatusType = (status: string) => {
    switch (status) {
      case "待审核":
        return "warning";
      case "通过":
        return "success";
      case "拒绝":
        return "danger";
      default:
        return "info";
    }
  };
  
  const loadData = async () => {
    const route = useRoute();
    const applicationId = Number(route.query.id);
    try {
      const res =
        await ClubApplicationControllerService.getApplicationVoById1(
          applicationId,
        );
      if (res.code === 0 && res.data) {
        application.value = {
          id: res.data.id as number,
          type: res.data.type as number,
          status: res.data.reviewVO?.result as string,
          applyDate: res.data.createTime as string,
          reason: res.data.reason as string,
          user: {
            id: res.data.userVo?.id as number,
            name: res.data.userVo?.userName as string,
            grade: res.data.userVo?.grade as string,
            major: res.data.userVo?.major as string,
            class: res.data.userVo?.userClass as string,
            contact: res.data.userVo?.phoneNumber as string,
          },
          review: {
            id: res.data.reviewVO?.id as number,
            result: res.data.reviewVO?.result as string,
            content: res.data.reviewVO?.content as string,
            createTime: res.data.reviewVO?.createTime as string,
            userVO: {
              userName: res.data.reviewVO?.userVO?.userName as string,
              phoneNumber: res.data.reviewVO?.userVO?.phoneNumber as string,
            },
          },
        } as ClubApplicationInfo;
  
        const type = res.data.type as number;
        if (type === 5) {
          application.value.clubInfo = {
            id: 0,
            name: res.data.clubName as string,
            tags: res.data.clubTags as string[],
            description: res.data.clubIntroduction as string,
          };
        } else if (type === 6) {
          application.value.clubInfo = {
            id: res.data.clubVo?.id,
            name: res.data.clubVo?.clubName as string,
          };
        } else {
          application.value.clubInfo = {
            id: res.data.clubVo?.id,
            name: res.data.clubName as string,
            tags: res.data.clubTags as string[],
            description: res.data.clubIntroduction as string,
            president: {
              id: res.data.newManager?.id as number,
              name: res.data.newManager?.userName as string,
              grade: res.data.newManager?.grade as string,
              major: res.data.newManager?.major as string,
              class: res.data.newManager?.userClass as string,
              contact: res.data.newManager?.phoneNumber as string,
            },
          };
        }
      } else {
        ElMessage.error("加载申请数据失败: " + res.message);
      }
    } catch (error) {
      console.error("加载数据时发生错误:", error.message || error);
      ElMessage.error("加载数据失败，请稍后重试");
    }
  };
  
  onMounted(() => {
    loadData();
  });
  </script>
  
  <style scoped>
  .application-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .club-description,
  .review-info {
    margin-bottom: 20px;
  }
  
  .application-reason {
    margin-bottom: 40px;
  }
  
  .mt-4 {
    margin-top: 1rem;
  }
  
  .mt-2 {
    margin-top: 0.5rem;
  }
  
  .mr-2 {
    margin-right: 0.5rem;
  }
  
  @media (max-width: 768px) {
    .application-detail {
      padding: 10px;
    }
  
    h3 {
      font-size: 16px;
    }
  }
  </style>